<template>
    <div class="order-details">
        <div class="breadcrumb">
            <RouterLink class="plain-link breadcrumb-link" :to="{ name: '/home/task-list' }">我的订单</RouterLink>
            / 详情页面
        </div>
        <div class="order-content">
            <div class="order-title">订单详情</div>
            <div class="order-status mt20" v-if="TaskDetails.taskStatus === 'accept'">等待用户确认接单</div>
            <div class="order-status mt20" v-else>等待工人接单</div>
            <div class="order-status-step mt20">
                <div class="order-step-1 mr14">提交订单</div>
                <div class="mr14" :class="[TaskDetails.taskStatus === 'accept' ? 'order-step-1' : 'order-step-2']">
                    工人接单
                </div>
                <div class="order-step-2 mr14">完成订单</div>
            </div>
            <div class="completion-time mt30">
                <div>{{ TaskDetails.createdTime || '--' }}</div>
                <div>{{ TaskDetails.updatedTime || '--' }}</div>
                <div>{{ TaskDetails.updatedTime1 || '--' }}</div>
            </div>
            <div class="order-information mt30">
                <div class="order-information-img">
                    <img :src="thumbnail" />
                </div>
                <div class="order-information-name">{{ TaskDetails.serviceName || '--' }}</div>
                <div class="order-information-spec">
                    <span v-for="spec in JSON.parse(TaskDetails.serviceDetail).selections" :key="spec.id">
                        {{ spec.selection }}
                    </span>
                </div>
                <div class="order-information-number">x{{ TaskDetails.amount }}</div>
                <div class="order-information-price">￥{{ TaskDetails.salary }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">服务信息</div>
                <div class="server-info-font">姓名：{{ TaskDetails.customerName || '--' }}</div>
                <div class="server-info-font">电话：{{ TaskDetails.customerPhone || '--' }}</div>
                <div class="server-info-font">服务时间：{{ TaskDetails.appointmentTime || '--' }}</div>
                <div class="server-info-font">地址：{{ TaskDetails.address || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">工人信息</div>
                <div class="server-info-font">姓名：{{ TaskDetails.employeeName || '--' }}</div>
                <div class="server-info-font">电话：{{ employeePhone || '--' }}</div>
            </div>
            <div class="server-info">
                <div class="server-info-title">详细信息</div>
                <div class="server-info-font">订单编号：{{ TaskDetails.orderId || '--' }}</div>
                <div class="server-info-font">创建时间：{{ TaskDetails.createdTime || '--' }}</div>
                <div class="server-info-font">接单时间：{{ TaskDetails.updatedTime || '--' }}</div>
            </div>
            <div class="operation-box">
                <el-button class="but_cancel" size="small">联系买家</el-button>
                <el-button class="but_cancel" size="small">取消订单</el-button>
                <el-button size="small">完成订单</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { getTaskOrderDetails, getTaskworkInfo, getpagedoTask } from '@/api/api.query.util';
import { useRoute, useRouter } from 'vue-router';
import { ref, Ref } from 'vue';

const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const TaskDetails:Ref<{[k:string] : any}> = ref({});
const employeePhone = ref(0);

const router = useRouter();
const route = useRoute();

getTaskOrderDetails({
    method: 'POST',
    data: {
        id: route.query.id,
    },
}).then((res) => {
    TaskDetails.value = res.result;
});
getTaskworkInfo({
    method: 'POST',
    data: {
        userId: route.query.employeeId,
    },
}).then((res) => {
    employeePhone.value = res.result.phoneNo;
});

</script>

<style lang="scss" scoped>
.order-details {
    height: 100%;
    flex-grow: 1;
    padding: 20px 30px;
    background-color: #ffffff;
    border-radius: 4px;
}
.breadcrumb,
.breadcrumb-link {
    color: #666666;
    font-size: 12px;
}
.order-content {
    margin-top: 20px;
    margin-right: 300px;
}
.order-title {
    font-size: 14px;
    color: #666666;
}
.order-status {
    color: #3ab0a2;
    font-size: 20px;
}
.order-status-step {
    height: 20px;
    background-color: #ebebeb;
    border-radius: 10px;
    display: flex;
}
.order-step-1 {
    font-size: 12px;
    width: 266px;
    height: 20px;
    background-color: #3ab0a2;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
}
.order-step-2 {
    font-size: 12px;
    height: 20px;
    width: 266px;
    line-height: 20px;
    text-align: center;
    color: #999999;
}
.completion-time {
    color: #333333;
    font-size: 12px;
    display: flex;
}
.completion-time div {
    width: 33%;
    text-align: center;
}

.order-information {
    border-top: solid 1px #ebebeb;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    width: 100%;
}
.order-information-img {
    img {
        height: 44px;
        width: 44px;
    }
}
.order-information-name {
    color: #3ab0a2;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
}
.order-information-spec {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}

.order-information-spec span {
    padding: 1px 9px;
    border-radius: 4px;
    font-size: 12px;
    color: #666666;
    margin-right: 5px;
    width: 42px;
    height: 16px;
    letter-spacing: 2px;
    border: solid 1px var(--border-color);
}
.order-information-number {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}
.order-information-price {
    color: #666666;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
}
.server-info {
    border-top: solid 1px #ebebeb;
    padding: 20px 0;
}
.server-info-title {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    line-height: 28px;
}
.server-info-font {
    font-size: 12px;
    color: #333333;
    line-height: 28px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.operation-box {
    float: right;
    margin-top: 20px;
}
.but_cancel {
    color: var(--text-secondary);
}
.mr14 {
    margin-right: -14px;
}
</style>
